<template>
  <div class="my-orders">
    <!-- 订单状态容器 -->
    <div class="order-status-container">
      <!-- 标题 -->
      <div class="top-header">我的订单</div>
      <!-- 状态项列表 -->
      <div class="status-list">
        <div
          v-for="(item, index) in statusList"
          :key="index"
          class="status-item"
        >
          <!-- 状态图标 + 数字标记 -->
          <div class="status-icon">
            <svg
              :viewBox="item.svgViewBox"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path :d="item.svgPath" fill="currentColor" />
            </svg>
            <!-- 数字标记 -->
            <span v-if="item.badge" class="badge">{{ item.badge }}</span>
          </div>
          <!-- 状态文字 -->
          <span class="status-text">{{ item.text }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
// 订单状态列表数据
const statusList = ref([
  {
    text: '待付款',
    svgViewBox: '0 0 24 24',
    svgPath: 'M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z',
    badge: null
  },
  {
    text: '待收货',
    svgViewBox: '0 0 24 24',
    svgPath: 'M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 8h-2V9h-2V7h4v4z',
    badge: null
  },
  {
    text: '待评价',
    svgViewBox: '0 0 24 24',
    svgPath: 'M21 6h-2v9H6v2c0 .55.45 1 1 1h11l4 4V7c0-.55-.45-1-1-1zm-4 6V3c0-.55-.45-1-1-1H3c-.55 0-1 .45-1 1v14l4-4h10c.55 0 1-.45 1-1z',
    badge: 1
  },
  {
    text: '退换/售后',
    svgViewBox: '0 0 24 24',
    svgPath: 'M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z',
    badge: null
  },
  {
    text: '全部订单',
    svgViewBox: '0 0 24 24',
    svgPath: 'M12 4v16l8-8-8-8z',
    badge: null
  }
]);
</script>

<style scoped lang="scss">
.my-orders {
  // 模块整体间距，可根据页面调整
  margin: 16px 0;

  .order-status-container {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    max-width: 700px;
    margin: 0 auto;

    .top-header {
      font-size: 16px;
      font-weight: 500;
      color: #333;
      padding: 16px 20px;
      border-bottom: 1px solid #eee; // 浅色分割线更柔和
    }

    // 状态项列表，用 flex 布局横向排列
    .status-list {
      display: flex;
      flex-wrap: nowrap; // 不换行，保持一行
      align-items: center;
      justify-content: space-around; // 从左到右排列
      padding: 16px 20px;
      gap: 32px; // 项与项之间间距

      .status-item {
        display: flex;
        flex-direction: column;
        align-items: center; // 图标和文字水平居中
        justify-content: space-around;
        cursor: pointer;
        transition: all 0.2s ease;
        padding: 8px 0;
        border-radius: 4px;

        &:hover {
          transform: translateY(-2px);
          background-color: #f5f5f5;
        }
      }
    }
  }

  .status-icon {
    position: relative;
    width: 24px;
    height: 24px;
    margin-bottom: 6px; // 图标与文字间距
    color: #333;

    svg {
      width: 100%;
      height: 100%;
    }
  }

  // 数字标记样式
  .badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background-color: #ff4d4f;
    color: white;
    font-size: 12px;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    border-radius: 50%;
    text-align: center;
    padding: 0 4px;
    font-weight: bold;
  }

  .status-text {
    font-size: 14px;
    color: #333;
    // 可单独给“全部订单”加样式
    &.all-order {
      color: #666;
    }
  }
}
</style>
